<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="职位" name="0">
      <div class="main">
        <div class="tab">
          <el-radio-group v-model="radio" size="default">
            <el-radio-button label="招聘中" border :value="0" />
            <el-radio-button label="暂停中" border :value="1" />
            <el-radio-button label="已关闭" border :value="2" />
          </el-radio-group>
          <el-checkbox style="margin-left: 20px" v-model="checked" label="全选" size="large" />
        </div>
        <div class="content">
          <div style="height: 2000px"></div>
        </div>
        <div>
          <el-divider style="margin: 10px 0" />
        </div>
        <div class="page">
          <el-pagination background layout=" prev, pager, next, sizes, jumper" :total="10" />
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="招聘需求" name="1">Config</el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('0')
const radio = ref(0)
const checked = ref(false)

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<style lang="scss" scoped>
.main {
  height: calc(100vh - 158px);
}
.tab {
  display: flex;
  height: 40px;
  align-items: center;
}
.content {
  height: calc(100% - 101px);
  overflow-y: auto;
}
.page {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: right;
}
</style>
